<template>
	<view class="container">
		<view class="avatar-box">
			<view class="img-box">
				<image mode="widthFix" :src="$api.loadFile(model.avatar)"></image>
			</view>
			<view class="btn-box">
				<view @tap="chooseImage" class="add">
					<text class="icon iconfont icon-add"></text>
					<text class="text">选择图片</text>
				</view>
			</view>
		</view>
		<dt-image-cutter @ok="submit" @cancel="cancle" :url="url" :fixed="true" :width="180" :height="180"></dt-image-cutter>
	</view>
</template>

<script>
	import imageCutter from "@/components/dt-image-cutter/dt-image-cutter.vue";
	export default {
		components: {
			imageCutter
		},
		data() {
			return {
				url: '',
				model: {
					avatar: null,
				},
			}
		},
		methods: {
			//初始化数据
			async initData(){
				let _this = this;
				//正在加载
				uni.showLoading({
				    title: '加载中'
				});
				//获取会员信息
				await _this.$api.request({
					url: "/account/member",
				}).then((res) => {
					_this.model = res.data;
				});
				//关闭加载
				uni.hideLoading();
			},
			//选择上传图片
			chooseImage() {
				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择和拍照
					success: async (e) => {
						var tempFilePaths = e.tempFilePaths;
						_this.url = tempFilePaths[0];
					}
				});
			},
			async submit(ev) {
				let _this = this;
				//正在加载
				uni.showLoading({
				    title: '更新中'
				});
				//console.log(ev.path);
				//上传图片
				await _this.$api.request({
					url: `/upload`,
					method: "file",
					data:{ filePath: ev.path },
				}).then(res=>{
					//console.log('成功:'+res.data);
					const imgList = JSON.parse(res.data);
					_this.model.avatar = imgList[0].filePath;
				});
				//更新会员头像
				await _this.$api.request({
					url: `/account/member/info`,
					method: "put",
					data: _this.model,
				}).then(res=>{
					_this.$api.msg(`更新成功`,1500,false,'success');
				});
				//关闭加载
				uni.hideLoading();
				_this.url = "";
			},
			cancle() {
				// url设置为空，隐藏控件
				this.url = "";
			}
		},
		//页面初始化
		onLoad(options){
			this.initData();
		},
	}
</script>

<style lang="scss">
	page,.container{
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 750rpx;
		height: 100%;
	}
	.avatar-box{
		display: flex;
		align-items: center;
		position: relative;
		width: 750rpx;
		.img-box{
			width: 100%;
			image{
				width: 100%;
			}
		}
		.btn-box{
			display: flex;
			justify-content: space-around;
			align-items: center;
			position: absolute;
			left: 0;
			right: 0;
			.add{
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 0 36rpx;
				height: 68rpx;
				box-sizing: border-box;
				border-radius: 68rpx;
				background: rgba($color: #000, $alpha: 0.4);
				border: 2rpx solid rgba($color: #000, $alpha: 0.3);
				color: #fff;
				.icon{
					margin-right: 6rpx;
					font-size: 30rpx;
				}
				.text{
					font-size: 30rpx;
				}
			}
		}
	}
</style>
